<template>
	<view class="lobby">
		<!-- 头部导航 -->
		<view class="w-750  w-bj-white" style="position: fixed; top: 0; left: 0;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center"></view>
				<view class="w-250 h-100 w-row-center w-wz-conts font-36">棋牌</view>
				<view class="wh-80 w-row-center"></view>
			</view>
		</view>
		<view class="bwh-100"></view>
		<!-- 头部导航结束 -->
		
		<view class="content-box padding-top-xs">
			<view class="padding-sm  w-bj-white">
				<view class="text-sml">
					<view class="van-space van-space--horizontal van-space--align-center">
						<view class="van-space-item">
							<span class="text-bold-lg">账户信息</span>
						</view>
					</view>
				</view>
				
				<view class="van-divider van-divider--hairline margin-bottom-0">
					
				</view>
				<view class="van-grid">
					<view class="van-grid-item" style="flex-basis: 50%;" v-for="(item,index) in infoList" :key="index">
						<view class="van-grid-item__content van-grid-item__content--center">
							<view class="van-space van-space--horizontal van-space--align-center text-color-grey disflex">
								<view class="van-space-item disflex" style="margin-right: 0.2rem;">
									<image class="info-icon" :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="van-space-item disflex">
									<span>{{item.title}}</span>
								</view>
							</view>
							
							<view class="">
								￥<span class="text-slg text-bold text-color-yellow">{{item.price}}</span>
							</view>
						</view>
					</view>
				</view>
			
				<view class="van-row">
					<view class="van-col van-col--12" style="padding-left: 15rpx;" @click="openPopup(1)">
						<button class="van-button van-button--primary van-button--normal van-button--plain van-button--block but1">
							<view class="van-button__content">
								<view class="van-button__text">
									棋牌账户转出
								</view>
							</view>
						</button>
					</view>
					<view class="van-col van-col--12" style="padding-left: 15rpx;" @click="openPopup(2)">
						<button class="van-button van-button--primary van-button--normal van-button--plain van-button--block but2">
							<view class="van-button__content">
								<view class="van-button__text">
									钱包余额转入
								</view>
							</view>
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox">
				<view class="padding-sm">
					<view class="title text-default text-bold text-color-black">
						棋牌账户{{type == 1 ? '转出': '转入'}}
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeRoom"></image>
					</view>
					
					<view class="van-cell van-field van-field--label-top margin-top">
						<view class="van-cell__title van-field__label van-field__label--top">
							<label for="van-field-1-input">请输入金额</label>
						</view>
						<view class="van-cell__value van-field__value">
							<view class="van-field__body">
								<input id="van-field-27-input" type="text" v-model="price" class="van-field__control" placeholder="最多可转出$0.00" />
							</view>
						</view>
					</view>
					
					<view class="van-row margin-top">
						<view class="van-col van-col--8" style="padding-left: 7.5px;" @click="closeRoom">
							<button class="van-button van-button--primary van-button--normal van-button--plain van-button--block but1">
								<view class="van-button__content">
									<span class="van-button__text">取消</span>
								</view>
							</button>
						</view>
						<view class="van-col van-col--16" style="padding-left: 7.5px;">
							<button :disabled="!price"
:class="{'van-button--disabled': !price}" class="van-button van-button--primary van-button--normal van-button--plain van-button--block but2">
								<view class="van-button__content">
									<span class="van-button__text">确认转出</span>
								</view>
							</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import infoIcon1 from '@/static/tabBar/qb2.png'
	import infoIcon3 from '@/static/index/dispensers-icon.png'
	export default {
		data () {
			return {
				infoList:[{
					title: '钱包余额',
					icon: infoIcon1,
					price: '0.00'
				},
				{
					title: '游戏账户余额',
					icon: infoIcon3,
					price: '0.00'
				}],
				type: 1,
				price: null,
				userInfo: null
			}
		},
		methods: {
			openPopup(type) {
				this.type = type
				this.$refs.popup.open()
			},
			closeRoom(){
				this.$refs.popup.close()

			},
		},
		onShow() {
			this.userInfo = uni.getStorageSync('UserInfo');
			this.infoList[0].price = this.userInfo.money || 0.00
		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #f0f3ff !important;
		color: #535d76;
		line-height: 1.6;
		    font-size: 3.46667vw;
	}

	uni-page-body {
		background-color: transparent;
	}

	.w-bj-cont {
		background-color: #f2f2ff !important;
	}

	.w-row-center {
		color: #333 !important;
	}
	
	.content-box{
		.van-divider {
		    display: flex;
		    align-items: center;
		    margin:4.26667vw 0;
		    color: #969799;
		    font-size: 3.73333vw;
		    line-height: 6.4vw;
		    border-color: #ebedf0;
		    border-style: solid;
		    border-width: 0;
			&:before{
				    content: "";
				display: block;
				    flex: 1;
				    box-sizing: border-box;
				    height: 1px;
				    border-color: inherit;
				    border-style: inherit;
				    border-width: 1px 0 0;
			}
		}
		.van-grid-item__content--center {
		    align-items: center;
		    justify-content: center;
		}
		
		.van-grid-item__content {
		    display: flex;
		    flex-direction: column;
		    box-sizing: border-box;
		    height: 100%;
		    padding: 4.26667vw 2.13333vw;
		    background: #fff;
			.info-icon{
				width: 44rpx;
			}
		}
		.margin-bottom-0 {
		    margin-bottom: 0 !important;
		}
		
		::v-deep .van-tabs__wrap{
			background-color: #fff;
			._item{
				justify-content: center !important;
				text-align: center !important;
			}
		}
		
		
	}
	
	.gameDetailBox{
		  padding-bottom: 3.2vw;
		  background-color: #f0f3ff;
		  .title{
			  position: relative;
			  .close-icon{
				  width: 32rpx;
				  height: 32rpx;
				  position: absolute;
				  top: 50%;
				  margin-top: -16rpx;
				  right: 0;
			  }
		  }
	  }
	  
	  ::v-deep .uni-popup{
		  z-index: 1001;
	  }
	  
	  .van-cell{
	  	line-height: 8vw;
	  	    position: relative;
	  	    // display: flex;
	  	    box-sizing: border-box;
	  	    width: 100%;
	  	    padding: 2.66667vw 4.26667vw;
	  	    overflow: hidden;
	  	    color: #323233;
	  	    font-size: 3.73333vw;
	  	    background: #fff;
	  		
	  		.van-field__label {
	  		    flex: none;
	  		    box-sizing: border-box;
	  		    width: 6.2em;
	  		    margin-bottom:3.2vw;
	  		    color: #323233;
	  		    text-align: left;
	  		    word-wrap: break-word;
	  		}
	  		
	  		.van-field__value {
	  		    overflow: visible;
	  		}
	  		
	  		.van-cell__value {
	  		    position: relative;
	  		    overflow: hidden;
	  		    color: #969799;
	  		    text-align: right;
	  		    vertical-align: middle;
	  		    word-wrap: break-word;
	  			display: flex;
	  			.van-field__body {
	  			    display: flex
	  			;
	  			    align-items: center;
	  				.van-field__control {
	  				    display: block;
	  				    box-sizing: border-box;
	  				    width: 100%;
	  				    min-width: 0;
	  				    margin: 0;
	  				    padding: 0;
	  				    color: #323233;
	  				    line-height: inherit;
	  				    text-align: left;
	  				    background-color: transparent;
	  				    border: 0;
	  				    resize: none;
	  				    -webkit-user-select: auto;
	  				    user-select: auto;
	  				}
	  			}
	  		}
	  }
	  
	  .but1 {
	  	    color: rgb(25, 137, 250) !important;
	  	    border-color: rgb(25, 137, 250) !important;
	  		background-color: transparent !important;
	  }
	  
	  .but2 {
	  	    color: #fff !important;
	  	    border-color: rgb(25, 137, 250) !important;
	  		background-color: rgb(25, 137, 250) !important;
	  }
</style>